<template>
	<view>
		<view class="page_header">
			<view class="header-img-0" :style="{height:StatusBarRpx+'rpx'}"> </view>
			<view class="top_search"  :style="{height:CustomTitleBar+'rpx', paddingRight:CustomTitleBarRight+'rpx'}">
				<u-search 
					:disabled="true" 
					placeholder="搜索" 
					placeholder-color="#B5B5B5"  
					@click="goSearchPage"
					bg-color="#fff" search-icon-color="#eec8ff" :show-action="false" :clearabled="true" v-model="s_key"></u-search>
			</view>
		</view>
		<view class="header-height" :style="{height:CustomBarRpx+'rpx'}"> </view>
		<u-gap height="30"></u-gap>
		<view class="home">
			<view class="page_swiper">
				<u-swiper :list="adlist3" 
					@click="clickSwiper"
					border-radius="20" 
					mode="none"
					img-mode="aspectFill"></u-swiper>
			</view>
			<u-gap height="30"></u-gap>
			<view class="notice-view">
				<view class="notice_main">
					<view class="notice_icon">
						<image
							style="width:50rpx; height:50rpx; display: block;"
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/43f6d30e184ff36b196f84418998897c.png"
							mode="aspectFill"></image>
						
					</view>
					<u-notice-bar :volume-icon="false" font-size="24" padding="20rpx 10rpx 20rpx 0" color="#002847" type="none" :list="notice" :speed="120" ></u-notice-bar>
				</view>				
			</view>
			<u-gap height="30"></u-gap>
			<view class="page_swiper" v-if="bestlist.length > 0">
				<u-swiper :list="bestlist" 
					@click="clickSwiper"
					border-radius="20" 
					mode="none"
					bg-color="none"
					img-mode="aspectFit"
					effect3d-previous-margin="200" :effect3d="true"></u-swiper>
					<u-gap height="30"></u-gap>
			</view>
			
			<view class="page_adlist2">
				<view v-for="(item,ind) in adlist2" class="ad_img" :class="'adimg_' + ind" @click="clickAd(item)">
					<image
						style="width:100%; height:100%; display: block; border-radius: 10px;"
						:src="item.image"
						mode="aspectFill"></image>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="tab-view">
				<view :class="{'tab-view-line':true,'tab-view-line-active' : item.value === currentPType}"
					v-for="item in playtypelist" :key="item.value" @click="changePType(item)">{{item.label}}</view>
			</view>
			<u-gap height="15"></u-gap>
			<view class="card-list">
				<view class="card-list-item-view" v-for="item in goodsList" :key="item.id" @click="lookbox(item)">
					<view class="card-list-item">
						<view class="c-item-goods">
							<image :src="item.footer_image"></image>
						</view>
						<view class="c-item-info">
							<view class="c-item-title">{{ item.title }}</view>
							<view class="c-item-price">￥<b>{{ (item.price * 1) }} </b><!-- <text>￥
									{{ (item.price * 1.4).toFixed(2) }}</text> --></view>
							<view class="c-item-look">{{ $t('查看') }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="pop_is_open" mode="center">
			<view class="pop-up-gonggao">
				<view class="pop-up-bg">
					<image :src="pop_bg" mode="aspectFit"></image>
				</view>
				<view class="pop-content">
					<u-parse :html="pop_content"></u-parse>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showModel" :content="content"></u-modal>
		<u-tabbar v-model="current" height="56px" :border-top="false" bg-color="#fff" inactive-color="#666"
			active-color="#37003F" :list="tabbar" ></u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				statusBarHeight:0,
				titleBarHeight:40,
				HeaderBar:0,
				CustomBar:0,
				app_logo:'',
				s_key:'',
				notice: ['发货公告：全场包邮，包运费，正常情况下申请发货后，一般预计在2-7个工作日左右发出，如物流信息未能及时更新，请你耐心等待，等待快递扫描之后即可查询物流详细信息'],
				current: 0,
				tabbar: tabbar,
				goodsList: [],
				index_gd_notice: '',
				pop_is_open: false,
				pop_bg: '',
				pop_content: '',
				forceRefresh: true,
				boxTypeList: [],
				currentType: 0,
				tongList: [], //中奖通知
				adlist1:[],  // 广告1 两图
				adlist2:[],  // 广告2 三图
				adlist3:[], // 首页轮番
				// 推荐盲盒
				bestlist: [],
				showModel:false,
				content:'正在开发中',
				currentPType: 1,
				playtypelist: [],
			}

		},
		onLoad() {
			this.getLogo()
			this.getBoxType()
			this.getBoxPlayType();
			this.getShippingAgreement()
			this.getTong()
			this.getAdvert();
			let _that = this;
			
		},
		onReady() {
			this.getManghe()
			this.getBestManghe();
		},
		onShow() {},
		methods: {
			goSearchPage(){
				uni.navigateTo({
					url: '/pagesB/pages/mall/search'
				})
			},
			clickSwiper(index){
				let that = this;
				that.lookbox(that.bestlist[index]);
			},
			clickAd(item){
				let tabbar = [
					'/pages/tabBar/home',
					'/pages/tabBar/mall',
					'/pages/tabBar/cangku',
					'/pages/tabBar/my'
				];
				this.showModel = true;
				return;
				if(item.link_url == '#'){
					this.showModel = true;
				}else{
					if(tabbar.includes(item.link_url)){
						uni.switchTab({
							url: item.link_url
						});
					}else{
						this.$.to(item.link_url)
					}
				}
			},
			getLogo(){
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					if (res.data.code == 1) {
						this.app_logo = res.data.data.app_logo
					}
				}).catch(err => {});
			},
			getBoxType() {
				this.$http({
					url: "api/common/get_blind_box_menu",
				}).then(res => {
					let all = {
						id: 0,
						title: "全部",
					}
					// 处理是否启用的图标
					let resultArr = res.data.data.map(item => {
						if (item.status == 1) {
							return {
								...item
							}
						}
					})

					this.boxTypeList = [...[all], ...resultArr]
					console.log(this.boxTypeList, '————————————————————————')
				})
			},
			getBoxPlayType() {
				this.$http({
					url: "api/common/get_blind_box_play",
				}).then(res => {
					this.playtypelist = res.data.data;
				})
			},
			getAdvert(){
				this.$http({
					url: "api/common/get_home_advert",
					data: {
						type: 1
					}
				}).then(res => {
					this.adlist1 = res.data.data.adlist1;
					this.adlist2 = res.data.data.adlist2;
					this.adlist3 = res.data.data.adlist3;
					console.log(res);
				})
			},
			getBestManghe() {
				uni.hideLoading()
				this.$http({
					url: "api/common/get_blind_box_best",
					data: {
						pid: this.currentType
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.bestlist = res.data.data
					}
				}).catch(err => {});
			},
			getManghe() {
				uni.hideLoading()
				this.$http({
					url: "api/common/get_blind_box",
					data: {
						playtype: this.currentPType,
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.goodsList = res.data.data
						this.goodsList = this.goodsList.map(item => {
							item.smallBannner = item.chunkArray
							return {
								...item,
								smallBannner: this.chunkArray(item.goods_list, 4)
							}
						})
						console.log(this.goodsList, 'prizeListprizeListprizeListprizeListprizeListprizeList')

						// this.smallGoodsLIst = getBox.goods_list.splice(0,3)
					}
				}).catch(err => {});
			},
			// 获取协议文本
			getShippingAgreement() {
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					if (res.data.code == 1) {
						this.notice = [res.data.data.index_gd_notice]
						this.pop_is_open = res.data.data.is_open_index_pop
						this.pop_bg = res.data.data.index_pop_bg
						this.pop_content = res.data.data.is_open_index_pop_content
					}
				}).catch(err => {});
			},



			// 查看盲盒
			lookbox(params) {
				let id = params.id
				let playtype = params.playtype;
				if(playtype == 2){
					// 一番赏
					uni.navigateTo({
						url: '/pagesB/pages/home/kaixiang2?id=' + id 
					})
				}else if(playtype == 3){
					uni.navigateTo({
						url: '/pagesB/pages/home/kaixiang3?id=' + id
					})
				}else{
					uni.navigateTo({
						url: '/pagesB/pages/home/kaixiang?id=' + id
					})
				}				
			},

			// 切换分类
			changeType(params) {
				this.currentType = params.id
				this.getManghe()
			},
			// 切换玩法
			changePType(params) {
				this.currentPType = params.value;
				this.getManghe()
			},

			// 商品拆分
			chunkArray(array, size) {
				const chunkedArray = [];
				let index = 0;

				while (index < array.length) {
					const chunk = array.slice(index, index + size);
					if (chunk.length < size) {
						const remaining = size - chunk.length;
						for (let i = 0; i < remaining; i++) {
							chunk.push(array[i % array.length]);
						}
					}
					chunkedArray.push(chunk);
					index += size;
				}

				return chunkedArray;
			},
			getTong() {
				this.$http({
					url: "api/common/get_blind_box_open_log",
				}).then(res => {
					if (res.data.code == 1) {
						this.tongList = res.data.data
					}
				}).catch(err => {});
			},



		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
</style>

<style lang="scss" scoped>
	.page_header{
		position: fixed;
		z-index: 100;
		width: 100%;
		top: 0;
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
	.top_logo{
		background: #1a162d;
		text-align: center;
	}
	.top_search{ margin:0 30rpx; width: 100%; display:flex; align-items: center;	}
	.page_adlist{
		margin:0 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.ad_img{ width: 48%; }
	}
	.page_adlist2{
		margin:0 30rpx;
		height:300rpx;
		position: relative;
		.adimg_0{
			position: absolute;
			width: 38%;
			height:300rpx;
		}
		.adimg_1{
			position: absolute;
			right:0;
			top:0;
			width:58%;
			height:140rpx;
		}
		.adimg_2{
			position: absolute;
			right:0;
			bottom:0;
			width: 58%;
			height:140rpx;
		}
	}
	.page_swiper{
		padding:0 30rpx;
	}
	.top-view {
		height: 740rpx;
		background-image: url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN012Vlqsh2JfEt1WWOIf_!!2215984279448.png');
		background-size: 100% 100%;
		padding-top: 88rpx;
		box-sizing: border-box;

		.top-view-header {
			width: 450rpx;
			height: 200rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.top-view-img {
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto;
			animation: line 3s linear infinite;
			position: relative;
			top: -50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.notice-view {
		padding:0 30rpx;
		.notice_main{
			background: url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/19064ca4411efb99e649b91a9a1faacd.png") no-repeat;
			background-size: 100% 100%;
			padding-left: 24px;
			position: relative;
			.notice_icon{
				width: 50rpx;
				height:50rpx;
				position: absolute;
				left: 0;
				top: 5px;
			}
		}
	}

	.card-list {
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.card-list-item-view {
			width: 48%;
			overflow: hidden;
			margin: 15rpx 0;
		}

		.card-list-item {
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			border-radius: 30rpx;
			overflow: hidden;
			.c-item-goods {
				width: 100%;
				height: 280rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.c-item-info {
				width: 100%;
			}

			.c-item-banner {
				height: 78rpx;
				width: 100%;
				display: flex;
				white-space: nowrap;
				// margin-top: 30rpx;
				overflow: hidden;

				&-box {
					width: 72rpx;
					height: 72rpx;
					display: inline-block;
					background-color: #313131;
					margin-left: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.c-item-title {
				color: #070820;
				margin-top: 16rpx;
				font-size: 26rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.c-item-price {
				margin-top:10rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FF0000;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				b{
					font-size: 36rpx;
				}
				text {
					color: #FF0000;
					text-decoration: line-through;
					margin-left:5rpx;
				}
			}

			.c-item-look {
				width: 100%;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				background-image: linear-gradient(to right, #c8e6ff, #a7a7f8, #8970f0);
				margin-top: 20rpx;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
			}
		}
	}

	.tab-view {
		height: 60rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		width: 750rpx;
		overflow-y: auto;

		.tab-view-line {
			color: #666;
			font-size: 24rpx;
			font-weight: 400;
			position: relative;
			margin-right: 30rpx;
			line-height: 44rpx;
		}


		.tab-view-line-active {
			color: #070820;
			font-size:32rpx;
		}

		.tab-view-line-active::before {
			content: '';
			width: 100%;
			display: inline-block;
			height: 12rpx;
			background-image: linear-gradient(to right, #eec8ff, #be9cf9, #876af2);
			// background: #00fdeb;
			position: absolute;
			bottom: 0;
			border-radius: 10rpx;
		}
	}

	@keyframes line {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-15px);
		}

		100% {
			transform: translateY(0);
		}
	}


	.pop-up-gonggao {
		width: 600rpx;
		height: 900rpx;
	}

	.pop-up-gonggao>.pop-up-bg,
	.pop-up-gonggao>.pop-up-bg image {
		// position: absolute;
		width: 100%;
		height: 100%;
	}

	.pop-up-gonggao>.pop-content {
		position: absolute;
		z-index: 99;
		top: 220rpx;
		padding: 10rpx 20rpx;
		height: 600rpx;
		overflow: auto;
		overflow-y: scroll;
		word-break: break-all;
	}

	.pop-up-gonggao>.pop-content img {
		width: 100%;
	}


	.swiper-view {
		height: 78rpx;
		width: 100%;
	}
	.wind-list{
		width: 690rpx;
		height:100rpx;
		background-image: url('https://z4a.net/images/2023/08/10/cef6c7187c9147e0bb6cd74f986c5ab4.png');
		background-size: 100% 100%;
		margin: 0 auto;
		box-sizing: border-box;
		padding-top: 24rpx;
	}
</style>